<template>
  <div id="main">
    <m-header :title="iNowTitle" :isRight="true" :isBack="false" :msgNumb="item.msgCount"></m-header>
    <div class="main_w">
      <section class="main_mod mr_t30">
        <aside class="head clear">
          <span class="left fl">我的联盟<a class="href" href="javascript:;" @click="showTerms">《联盟条款细则》</a></span>

          <span v-if="item.oauth_status == '3'" class="right fr">
            <a v-if="item.user_type == '2'" class="href" href="javascript:;">已认证</a>
            <router-link v-else tag="a" class="href" to="/accountCertification">已认证</router-link>
          </span>
          <span v-else-if="item.oauth_status == '2'" class="right fr">
            当前账号未认证，
            <router-link
              v-if="item.userExtra && item.userExtra.sesameCreditFlag && item.userExtra.sesameCreditFlag != '1'" tag="a"
              class="href" to="/accountCertification">立即认证</router-link>
            <router-link v-else tag="a" class="href" to="/accountSelect">立即认证</router-link>
          </span>
          <span v-else-if="item.oauth_status == '4'" class="right fr" v-else>当前账号,<router-link tag="a" class="href"
                                                                                               to="/accountSelect">认证不通过</router-link></span>
          <span class="right fr" v-else-if="!item.oauth_status">当前账号,<router-link tag="a" class="href"
                                                                                  to="/accountSelect">待认证</router-link></span>

          <!--<span v-if="item.oauth_status == '已认证'" class="right fr">-->
          <!--<a class="href" :href="oauthLink">{{item.oauth_status}}</a>-->
          <!--</span>-->
          <!--<span class="right fr" v-else>当前账号未认证，<a class="href" :href="oauthLink">立即认证</a></span>-->
        </aside>
        <article class="main_mod_c">
          <div class="main_mod_me head_mod_top" id="copyUrl">
            <!-- <span class="left_text">邀请码</span> -->
            <div class="input_href">{{ucpaasUrl}}/user/toSign?inviteCode={{item.code}}</div>
            <span class="right_btn" :data-clipboard-text="ucpaasUrl+'/user/toSign?inviteCode='+item.code"
                  @click="copyUrl('copyUrl')">复制邀请链接</span>
          </div>
          <div class="main_mod_me head_mod_top" id="copyCode">
            <!-- <span class="left_text">邀请码</span> -->
            <div class="input_href">{{item.code}}</div>
            <span class="right_btn" :data-clipboard-text="item.code" @click="copyUrl('copyCode')">复制邀请码</span>
          </div>
          <p class="desc_text">*邀请用户使用云之讯短信产品，即可获得高额返利</p>
        </article>
      </section>
      <section class="main_mod mr_t30">
        <aside class="head clear">
          <span class="left fl">返利账号余额</span>
          <span class="right fr"><a class="href" @click="showWithdraw" href="javascript:;">立即提现</a></span>
        </aside>
        <article class="main_mod_c">
          <div class="main_mod_account">
            <div class="top">
              <h2 class="title">{{item.sum_charge_sms_pck}}元</h2>
              <p class="small_title">
                可提现额度：<em>{{item.available_money}}</em>元<i>（未结算：<b>{{item.sum_charge_sms_pck - item.available_money}}</b>元）</i>
              </p>
            </div>
            <div class="btn clear">
              <div class="fl small_mod">
                <p class="numb"><em>{{item.agentUserCount}}</em>个</p>
                <p class="desc">发展客户数</p>
              </div>
              <div class="fl small_mod">
                <p class="numb"><em>{{item.sum_charge}}</em>元</p>
                <p class="desc">客户累计充值</p>
              </div>
              <!--<div class="fl small_mod">-->
                <!--<p class="numb"><em>{{item.total_money}}</em>元</p>-->
                <!--<p class="desc">累计返利金额</p>-->
              <!--</div>-->
            </div>
          </div>
        </article>
      </section>
      <section class="main_mod mr_t30">
        <article class="main_mod_c">
          <div class="main_mod_account">
            <div class="btn clear">
              <div class="fl small_mod">
                <p class="numb"><em>{{item.available_money}}</em>元</p>
                <p class="desc">预计可提现金额</p>
              </div>
              <div class="fl small_mod">
                <p class="numb"><em>{{item.consume_money}}</em>元</p>
                <p class="desc">客户累计消耗</p>
              </div>
              <!--<div class="fl small_mod">-->
                <!--<p class="numb"><em>{{item.total_money}}</em>元</p>-->
                <!--<p class="desc">累计返利金额</p>-->
              <!--</div>-->
            </div>
          </div>
        </article>
      </section>

      <section class="main_mod mr_t30">
        <aside class="head clear">
          <span class="left fl">我的联盟账户：<em v-if="item.account" class="user_name">{{item.account.account_no}}</em><em
            v-else class="user_name">未设置账户</em></span>
          <span class="right fr"><a class="href" href="javascript:;" @click="showAccountAlert">设置提现账户</a></span>
        </aside>
      </section>
      <section class="main_mod mr_t30">
        <aside class="head clear">
          <span class="left fl">联盟管理</span>
        </aside>
        <article class="main_mod_c">
          <div class="main_mod_alliance">
            <router-link tag="a" to="/myCustomer" class="main_alliance_item fl">
              <img class="icon_img" src="../common/images/icon_my_client.png" alt="">
              <p class="title">我的客户</p>
            </router-link>
            <router-link tag="a" to="/myWithdrawals" class="main_alliance_item fl">
              <img class="icon_img" src="../common/images/icon_record.png" alt="">
              <p class="title">提现记录</p>
            </router-link>
            <router-link tag="a" to="/myExchanges" class="main_alliance_item fl">
              <img class="icon_img" src="../common/images/icon_voucher.png" alt="">
              <p class="title">我的兑换卡</p>
            </router-link>
          </div>
        </article>
      </section>
      <section class="main_mod mr_t30">
        <aside class="head clear">
          <span class="left fl">我的兑换卡
            <!-- <em class="number">（<i>4</i>张未兑换）</em> -->
          </span>
          <span class="right fr"><router-link class="href bind_href" tag="a" to="/bind">绑定兑换卡</router-link></span>
        </aside>
        <article class="main_mod_c">
          <div class="main_mod_voucher">
            <ul class="voucher_list" v-if="sliderArr.length == 0">
              <li class="voucher_li">
                <div style="text-align:center;line-height:150px;font-size:14px;"><router-link class="voucher_li_link" to="/bind" tag="a">点击立即绑定卡</router-link></div>
              </li>
              <!--<li v-if="sliderArr.length != 0" class="voucher_li">-->
              <!--<div class="voucher_li_w">-->
              <!--<p class="number_n" id="smsNum">{{sliderArr[0].smsNum}}条</p>-->
              <!--<p class="desc" id="range">{{sliderArr[0].event_name}}</p>-->
              <!--<p class="desc" id="validPeriod">兑换有效期：{{sliderArr[0].createDate}}~{{sliderArr[0].end_date}}</p>-->
              <!--<p class="desc">兑换卡号：{{sliderArr[0].couponNum}}</p>-->
              <!--<p class="desc">兑换码：{{sliderArr[0].channelNum}}</p>-->
              <!--<div class="right_time">-->
              <!--<p>-->
              <!--有效期时间-->
              <!--<br>-->
              <!--<em id="expiryTime">{{sliderArr[0].expiry_time}}</em>天-->
              <!--</p>-->
              <!--</div>-->
              <!--</div>-->
              <!--</li>-->
            </ul>
            <Carousel class="voucher_list" v-model="sliderVal" autoplay loop dots="outside"
                      :autoplay-speed="autoplaySpeed" v-if="sliderArr.length != 0">
              <CarouselItem class="voucher_li" v-if="sliderArr.length != 0" v-for="slider in sliderArr">
                <div class="demo-carousel">
                  <div class="voucher_li_w">
                    <p class="number_n">{{slider.smsNum}}条</p>
                    <p class="desc">{{slider.event_name}}</p>
                    <p class="desc">兑换截止日期：{{slider.end_date}}</p>
                    <p class="desc">兑换卡号：{{slider.channelNum}}</p>
                    <p class="desc">兑换码：{{slider.couponNum}}</p>
                    <div class="right_time">
                      <p>
                        有效期时间
                        <br>
                        <em>{{slider.expiry_time}}</em>天
                      </p>
                    </div>
                  </div>
                </div>
              </CarouselItem>
            </Carousel>
          </div>
        </article>

      </section>
      <section class="main_mod mr_t30">
        <a class="quit_out" @click="logOut" href="javascript:;">退出当前账号</a>
      </section>
    </div>
    <Copyright></Copyright>

    <!-- terms 联盟条款 -->
    <div class="mark" v-show="iShowTerms"></div>
    <transition name="fade">
      <div class="alert_btm" v-show="iShowTerms">
        <div class="alert_btm_w">
          <div class="title">邀请条款及细则<a href="javascript:;" @click="hideTerms"></a></div>
          <h3 class="h3_title">【返利条件】</h3>
          <p class="desc">1.被推荐用户通过邀请链接注册云之讯后，注册并通过认证视为邀请成功；</p>
          <p class="desc">2.邀请人可以享受被邀请人短信套餐包的消费额度10.00%的返利。</p>
          <p class="desc">3.激活返利机制（不包含红包或使用兑换券等消费形式）</p>
          <h3 class="h3_title">【返利提取条件】</h3>
          <p class="desc">1.平台将每天计算一次被邀请人消费数据，根据返利比例计算出获得的返利金额；</p>
          <p class="desc">2.当账户可提取金额满100元，即可发起提现申请，平台会在7个工作日进行审核发放；</p>
          <p class="desc">3.返利活动最终解释权归云之讯所有。</p>
          <h3 class="h3_title">【注意事项】</h3>
          <p class="desc">1.如用户触发账户信用额度产生后产生的返利金额，在未补充信用额度金额前，不进行返利。</p>
        </div>
        <div class="btn_big" @click="hideTerms">知道了</div>
      </div>
    </transition>

    <!-- 修改提现账户 开始 -->
    <div v-if="iSAccount" class="mark"></div>
    <div v-if="iSAccount" class="alert_mod">
      <div class="head"><em>{{accountTitle}}</em><a href="javascript:;" @click="hideAccountAlert"></a>
      </div>
      <form @submit.prevent="submitAccount">
        <div class="alert_mod_c">
          <div class="alert_mod_line clear">
            <span class="text_fl">图形验证码</span>
            <div class="text_fr clear">
              <input class="alert_mod_input img_code fl" type="text" maxlength="4" name="accountObjImgCode"
                     v-validate="'required'"
                     :class="{'input': true, 'is-danger': errors.has('accountObjImgCode') }"
                     v-model="accountObj.imgCode" value=""
                     placeholder="图形验证码">
              <span class="code_mod fl"><img :src="accountImgCodeUrl" alt="" @click="refreshImgCode"></span>
            </div>
          </div>
          <div class="alert_mod_line clear">
            <p class="form_err"><span v-show="errors.has('accountObjImgCode')"
                                      class="help is-danger">{{ errors.first('accountObjImgCode') }}</span></p>
          </div>
          <div class="alert_mod_line clear">
            <span class="text_fl">手机验证码</span>
            <div class="text_fr">
              <input class="alert_mod_input  img_code fl" name="accountObjPhoneCode" v-model="accountObj.phoneCode"
                     v-validate="'required'"
                     :class="{'input': true, 'is-danger': errors.has('accountObjPhoneCode') }"
                     type="text" value=""
                     placeholder="请输入验证码">
              <input type="button" @click="accountSendCode" ref="accountBtn" class="code_btn fl"
                     v-model="accountObj.btnDesc"/>
            </div>
          </div>
          <div class="alert_mod_line clear">
            <p class="form_err"><span v-show="errors.has('accountObjPhoneCode')"
                                      class="help is-danger">{{ errors.first('accountObjPhoneCode') }}</span></p>
          </div>
          <div class="alert_mod_line clear">
            <span class="text_fl">&nbsp;</span>
            <div class="text_fr">
              <span class="sub_btn" @click="accountSubmit">提交申请</span>
              <span class="sub_btn active" @click="hideAccountAlert">取消</span>
            </div>
          </div>
        </div>
      </form>
    </div>
    <!-- 修改提现账户 结束 -->

    <!-- 返利提现 开始 -->
    <div v-show="isWithdraw" class="mark"></div>
    <div v-show="isWithdraw" class="alert_mod">
      <div class="head">返利提现<a href="javascript:;" @click="hideWithdraw"></a></div>
      <div class="alert_mod_c">
        <div class="alert_mod_line clear">
          <span class="text_fl">可提现金额</span>
          <div class="text_fr">
            <p class="text_numb"><em v-html="item.available_money"></em>元</p>
          </div>
        </div>
        <div class="alert_mod_line clear">
          <span class="text_fl">提取金额</span>
          <div class="text_fr">
            <input class="alert_mod_input" name="moneyW" @keyup.up="inputMoney" type="text"
                   v-model.number="withdrawObj.money"
                   placeholder="请输入大于等于100的整数">元
          </div>
        </div>
        <div class="alert_mod_line clear">
          <p class="form_err" v-html="withdrawObj.moneyErr"></p>
        </div>
        <div class="alert_mod_line clear">
          <span class="text_fl">图形验证码</span>
          <div class="text_fr clear">
            <input class="alert_mod_input img_code fl" name="imgCodeW" v-model="withdrawObj.imgCode" type="text"
                   maxlength="4" v-validate="'required'"
                   :class="{'input': true, 'is-danger': errors.has('imgCodeW') }"

                   value="" placeholder="图形验证码">
            <span class="code_mod fl"><img :src="accountImgCodeUrl" @click="refreshImgCode" alt="图形验证码"></span>
          </div>
        </div>
        <div class="alert_mod_line clear">
          <p class="form_err"><span v-show="errors.has('imgCodeW')"
                                    class="help is-danger">{{ errors.first('imgCodeW') }}</span></p>
        </div>
        <div class="alert_mod_line clear">
          <span class="text_fl">手机验证码</span>
          <div class="text_fr">
            <input class="alert_mod_input img_code fl" name="withdriphoneCode" v-model="withdrawObj.iphoneCode"
                   type="text" placeholder="请输入验证码"
                   maxlength="4" v-validate="'required'"
                   :class="{'input': true, 'is-danger': errors.has('withdriphoneCode') }">
            <input type="button" class="code_btn fl" ref="withdrawbtn" @click="withdrawSendCode"
                   v-model="withdrawObj.btnDesc" value="获取验证码"/>
          </div>
        </div>
        <div class="alert_mod_line clear">
          <p class="form_err"><span v-show="errors.has('withdriphoneCode')"
                                    class="help is-danger">{{ errors.first('withdriphoneCode') }}</span></p>
        </div>
        <div class="alert_mod_line clear">
          <span class="text_fl">&nbsp;</span>
          <div class="text_fr">
            <span class="sub_btn" @click="subWithdrawFn">提交申请</span>
            <span class="sub_btn active" @click="hideWithdraw">取消</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 返利提现 结束 -->
  </div>
</template>

<script type="text/ecmascript-6">
  import Copyright from 'base/copyright/copyright'
  import MHeader from 'base/m-header/m-header'

  import Clipboard from 'clipboard';
  import {Carousel, CarouselItem} from 'iview';


  import {Toast} from 'mint-ui'

  import md5 from 'js-md5'
  import {ERR_OK, HOST, UCPAASURL} from 'config/config'
  import * as types from '../store/types'

  export default {
    data() {
      return {
        sliderVal: 0,
        autoplaySpeed: 4000,
        slideData: 0,
        iNowTitle: '云核空间',
        iShowTerms: false,
        iSAccount: false,
        accountTitle: '',
        accountImgCodeUrl: '',
        accountImgCode: '',
        item: {},
        ucpaasUrl: UCPAASURL,
        oauthLink: '',
        sliderArr: [],
        checkCodeId: null,
        accountObj: {
          imgCode: null,
          phoneCode: null,
          btnDesc: '获取验证码',
          vmobile: '',
          time: 60
        },
        isWithdraw: false,
        withdrawObj: {
          money: null,
          moneyErr: '',
          imgCode: '',
          iphoneCode: '',
          btnDesc: '获取验证码',
          vmobile: '',
          time: 60
        }
      }
    },
    created() {
      // 获取首页数据
      this.$nextTick(() => {
        this.getAgentInfo();
      })
    },
    mounted() {

    },
    methods: {
      showTerms() {
        this.iShowTerms = true
      },
      hideTerms() {
        this.iShowTerms = false
      },
      copyUrl(obj) {

        var clipboard = new Clipboard('.right_btn');

        clipboard.on('success', function (e) {
//          console.info('Action:', e.action);
//          console.info('Text:', e.text);
//          console.info('Trigger:', e.trigger);
          Toast('复制成功！');
          e.clearSelection();
        });

        clipboard.on('error', function (e) {
//          console.error('Action:', e.action);
//          console.error('Trigger:', e.trigger);
          Toast('复制失败,请手动复制');
        });

      },
      getAgentInfo() {
        //获取首页信息
        this.$http({
          method: 'post',
          url: '/mobile/api/v1.0/user/cloudCoreSpace/getAgentInfo'
        }).then((res) => {
          if (res.data.code == ERR_OK) {
            this.item = res.data.data;
            this.sliderArr = this.item.channelCoupon;
            this.oauthLink = this.ucpaasUrl + '/user/userCenter';
          } else {
            Toast('请求失败，' + res.data.msg);
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      showAccountAlert() {
        if (this.item.account) {
          this.accountTitle = '修改提现账户';
        } else {
          this.accountTitle = '设置提现账户';
        }
        this.$http({
          method: 'post',
          url: '/mobile/api/v1.0/checkcode/checkCodeId'
        }).then((res) => {
          this.checkCodeId = res.data.msg;
          this.refreshImgCode();
          this.iSAccount = true;
        }).catch((err) => {
          console.log(err);
        })
      },
      hideAccountAlert() {
        this.iSAccount = false;
      },
      refreshImgCode() {
        // 刷新验证码方法
        this.accountImgCodeUrl = '/mobile/api/v1.0/checkcode/updatePhoneImageCodeAllNumber?checkCodeId=' + this.checkCodeId + '&t=' + Math.random();
      },
      accountSendCode() {

        //设置账户，发送验证码
        this.$validator.validateAll({
          accountObjImgCode: this.accountObj.imgCode
        }).then((result) => {
          if (!result) {
            return false
          }
          return this.$http({
            method: 'post',
            url: '/mobile/api/v1.0/checkcode/smsCheckCode',
            data: {
              imageCode: this.accountObj.imgCode,
              checkCodeId: this.checkCodeId,
              phone: this.item.mobile
            }
          })
        }).then((res) => {
          if (res.data.code == ERR_OK) {
            const obj = this.$refs.accountBtn;
            this.setTimeOutAccounFn(obj);
            this.accountObj.vmobile = res.data.data.vmobile;
            Toast('验证码发送成功！');
          } else {
            Toast(res.data.msg);
          }
        }).catch((err) => {
          console.log(err);
        })
      },
      accountSubmit() {

        //设置提现账号提交
        this.$validator.validateAll({
          accountObjImgCode: this.accountObj.imgCode,
          accountObjPhoneCode: this.accountObj.phoneCode
        }).then((result) => {
          if (!result) {
            return false
          }
          if (!this.accountObj.phoneCode) {
            return
          }
          const md5x = md5(this.item.mobile + this.accountObj.phoneCode);
          if (md5x == this.accountObj.vmobile) {
            if (this.item.account && this.item.account.account_no) {
              this.$router.push({
                path: '/accountMsg'
              })
            } else {
              this.$router.push({
                path: '/accountEdit'
              })
            }
          } else {
            Toast('手机验证码错误！');
          }
        });
      },
      setTimeOutAccounFn(obj) {

        if (this.accountObj.time == 0) {
          obj.removeAttribute("disabled");
          this.accountObj.btnDesc = "发送验证码";
          this.accountObj.time = 60;
          clearTimeout(setTime);
        } else {
          obj.setAttribute("disabled", 'disabled');
          this.accountObj.btnDesc = "重新发送(" + this.accountObj.time + ")";
          this.accountObj.time--;
          var setTime = window.setTimeout(() => {
            const obj = this.$refs.accountBtn;
            this.setTimeOutAccounFn(obj)
          }, 1000)
        }
      },
      showWithdraw() {

        //显示立即提现
        this.$http({
          method: 'post',
          url: '/mobile/api/v1.0/checkcode/checkCodeId'
        }).then((res) => {
          this.checkCodeId = res.data.msg;
          this.refreshImgCode();
          this.isWithdraw = true;
        }).catch((err) => {
          console.log(err);
        })

      },
      hideWithdraw() {
        //隐藏返利弹窗
        this.isWithdraw = false;
      },
      inputMoney() {

      },
      withdrawSendCode() {

        if (this.withdrawObj.money == null || !parseInt(this.withdrawObj.money)) {
          this.withdrawObj.moneyErr = '请正确的输入金额数';
          return
        }
        if (parseInt(this.withdrawObj.money) < 100) {
          this.withdrawObj.moneyErr = '请正确的输入大于100的数字';
          return
        }
        if (parseInt(this.withdrawObj.money) > parseInt(this.item.available_money)) {
          this.withdrawObj.moneyErr = '请输入小于等于可提现金额的整数';
          return
        }
        this.withdrawObj.money = parseInt(this.withdrawObj.money);
        this.withdrawObj.moneyErr = '';

        this.$validator.validateAll({
          imgCodeW: this.withdrawObj.imgCode
        }).then((result) => {
          if (!result) {
            return false
          }
          return this.$http({
            method: 'post',
            url: '/mobile/api/v1.0/checkcode/smsCheckCode',
            data: {
              imageCode: this.withdrawObj.imgCode,
              checkCodeId: this.checkCodeId,
              phone: this.item.mobile
            }
          })
        }).then((res) => {
          if (res.data.code == ERR_OK) {
            const obj = this.$refs.withdrawbtn;
            this.setIimeOutTimeW(obj);
            this.withdrawObj.vmobile = res.data.data.vmobile;
            Toast('验证码发送成功！');
          } else {
            Toast(res.data.msg);
          }
        }).catch((err) => {
          console.log(err);
        })


      },
      setIimeOutTimeW(obj) {
        var setTimeW = null;
        if (this.withdrawObj.time == 0) {
          obj.removeAttribute("disabled");
          this.withdrawObj.btnDesc = "发送验证码";
          this.withdrawObj.time = 60;
          clearTimeout(setTimeW);
        } else {
          obj.setAttribute("disabled", 'disabled');
          this.withdrawObj.btnDesc = "重新发送(" + this.withdrawObj.time + ")";
          this.withdrawObj.time--;
          setTimeW = window.setTimeout(() => {
            const obj = this.$refs.withdrawbtn;
            this.setIimeOutTimeW(obj)
          }, 1000)
        }
      },
      subWithdrawFn() {
        if (this.withdrawObj.money == null || !parseInt(this.withdrawObj.money)) {
          this.withdrawObj.moneyErr = '请正确的输入金额数';
          return
        }
        if (parseInt(this.withdrawObj.money) < 100) {
          this.withdrawObj.moneyErr = '请正确的输入大于100的数字';
          return
        }
        if (parseInt(this.withdrawObj.money) > parseInt(this.item.available_money)) {
          this.withdrawObj.moneyErr = '请输入小于等于可提现金额的整数';
          return
        }
        this.withdrawObj.moneyErr = '';
        this.withdrawObj.money = parseInt(this.withdrawObj.money);

        this.$validator.validateAll({
          imgCodeW: this.withdrawObj.imgCode,
          withdriphoneCode: this.withdrawObj.iphoneCode
        }).then((result) => {
          if (!result) {
            return
          }

          return this.$http({
            method: 'post',
            url: '/mobile/api/v1.0/channelAgent/submitApply',
            data: {
              apply_money: this.withdrawObj.money,
              smsVerifyCode: this.withdrawObj.iphoneCode,
              phone: this.item.mobile
            }
          })
        }).then((res) => {
          if (res.data.code == ERR_OK) {
            this.isWithdraw = false
            Toast('提交成功');
          } else {
            Toast(res.data.msg);
          }

        }).catch((err) => {
          console.log(err)
        })
      },
      logOut() {
        this.$http({
          method: 'post',
          url: '/mobile/api/v1.0/user/logout',
        }).then((res) => {
          if (res.data.code == ERR_OK) {
            this.$store.commit(types.LOGIN);
            Toast('退出成功！')
            this.$router.push({
              path: '/login'
            })
          } else {
            Toast('请求失败，请重试！');
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    components: {
      Copyright,
      MHeader,
      Carousel,
      CarouselItem
    }
  }

</script>

<style lang="less" rel="stylesheet/less">

  .main_w .main_mod .head .right .href {
    display: inline-block;
  }

  .alert_warp {
    &.fade-enter-active, &.fade-leave-active {
      transition: all 0.5s;
    }
    &.fade-enter, &.fade-leave-active {
      opacity: 0;
      background: rgba(7, 17, 27, 0);
    }
  }

</style>
